<template>
  <JPortalcard :title="'服务端FeatureLayer'" :bordered="false">
    <a-switch
      size="small"
      slot="extra"
      :loading="gisLoading"
      checked-children="gis"
      un-checked-children="gis"
      @change="handGisToggle"/>
  </JPortalcard>
</template>
<script>
import { portalCardMixin } from '@jxstjh/portal/lib/mixins/portalcard'
import { loadModules } from 'esri-loader'
import { mapGetters } from 'vuex'
const BASEID = 'ServerFeatureLayer'
export default {
	name: 'ServerFeatureLayer',
	mixins: [portalCardMixin],
	components: {
	},
	computed: {
    ...mapGetters({
      gisView: 'gisView',
      gisMap: 'gisMap'
		})
	},
	data () {
		return {
      gisLoading: false
		}
	},
	created () {
		console.log(this.GET_USER_INFO())
		console.log(this.GET_AUTH_TOKEN())
		// this.$message.info('hello word 组件来自远程.共享基座项目vue实例!')
	},
	mounted () {
	},
	methods: {
		hook_resized (i, newH, newW, newHPx, newWPx) {
			this.randerChart()
    },
    handGisToggle (e) {
      e ? this.initGisLayer() : this.unloadLayer()
    },
		async initGisLayer () {
      const map = this.gisMap
      const view = this.gisView
      if (map.findLayerById(BASEID)) {
          map.remove(map.findLayerById(BASEID))
      }
      view.goTo({
        center: [116, 27],
        zoom: 2
      }, { duration: 1500 })
      view.when().then((msg) => {
        console.log('view.when', msg)
      })
      console.log(map)
      const [esriConfig, MapImageLayer] = await loadModules([
        'esri/config', 'esri/layers/MapImageLayer'
      ])
      const flURL = 'http://gxpt.jxsl.gov.cn/arcgis/rest/services/UNN_FAC_COEN/Feature_UNN_FAC_COEN_RESP/MapServer'
      esriConfig.request.interceptors.push({
        urls: flURL,
        before: function (params) {
          if (params.requestOptions.query) {
            params.requestOptions.query.code = '32859fd6825eb40f483875cc5f78d300f'
          }
        }
      })
      this.gisLoading = true
      const f2 = new MapImageLayer({
        url: flURL,
        id: BASEID
      })
      f2.on('layerview-create', (e) => {
        console.log('layerview-create', e)
        this.gisLoading = false
      })
      map.add(f2)
    },
    unloadLayer () {
      const map = this.gisMap
      if (map.findLayerById(BASEID)) {
        map.remove(map.findLayerById(BASEID))
      }
    }
  },
	destroyed () {
    this.unloadLayer()
	}
}
</script>
<style lang="less" scoped>
</style>
